Vue.component("yl-table", {
  template: `<div>
  <el-form :inline="true" :form="form">
    <el-form-item>
      <el-input v-model="form.ID_Name" placeholder="请输入账号名称" @keyup.enter="onSerach"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSerach">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" stripe border height="calc(100vh - 140px)" style="width: 100%">
    <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
    <el-table-column v-for="(item,index) in data.propData.filter(i=>i.isShow)" :key="index"
      :prop="item.prop" :label="item.label"></el-table-column>
    <el-table-column align="center" label="操作" width="180">

    </el-table-column>
  </el-table>
  <div style="display: flex;align-items: center;justify-content: space-between;">
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="form.page" :page-sizes="[10, 20, 30, 50]" :page-size="form.limit"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <el-button @click="handle" type="primary" size="mini" icon="el-icon-setting" plain>配置页面</el-button>
  </div></div>`,
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: {
        page: 1, //页数
        limit: 10, //每页数据条数
      },
      total: 0,
      tableData: [],
      prop: {},
      value: "",
    };
  },
  mounted() {
    console.log(this.data);
    this.getList(this.form);
  },
  methods: {
    onSerach() {
      //查询方法
      this.getList(this.form);
    },
    handleSizeChange(val) {
      this.form.page = 1;
      this.form.limit = val;
      this.getList(this.form);
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
    getList() {
      const that = this;
      $.ajax({
        type: "POST",
        url: `${DomainName}${that.data.Type}?token=${$.cookie("token")}`,
        data: {
          Data: that.data.Type == "0" ? "" : that.data.SQLString,
          Type: "0",
        },
        success: function (Result) {
          if (Result.Status == "success") {
            that.tableData = Result.Data;
          }
        },
        complete: function (XMLHttpRequest) {
          if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
            window.parent.document.location.href =
              absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
          }
        },
        dataType: "json",
      });
    },
    Add() {
      window.location.href = "./Add.html";
    },
    handle() {
      sessionStorage.setItem(
        "System_Query_SerialNumber",
        this.data.System_Query_SerialNumber
      );
      window.location.href = absolutepath() + "/component/config.html";
    },
  },
});

new Vue({
  el: "#app",
  data() {
    return {
      config: {
        Type: "/getInquirySQLAction",
        TableName: "",
        SQLString:
          "SELECT approval_info.Approval_Info_SerialNumber As Approval_Info_SerialNumber,\r\n            approval_info.Approval_Info_Name As Approval_Info_Name,\r\n            approval_info.approval_auto_pass As approval_auto_pass\r\n            FROM approval_info",
        propData: [
          { prop: "Approval_Info_SerialNumber", label: "测试", isShow: false },
          { prop: "Approval_Info_Name", label: "哈哈哈", isShow: true },
          { prop: "approval_auto_pass", label: "1231", isShow: true },
        ],
      },
    };
  },
  mounted() {
    this.getData("Q00000000000001");
  },
  methods: {
    getData(Primary_Key) {
      const that = this;
      $.ajax({
        type: "POST",
        url: `${DomainName}/getInquiryIDAction?token=${$.cookie("token")}`,
        data: {
          Data: "system_query_info",
          Primary_Key_Name: "System_Query_SerialNumber",
          Primary_Key, //0:正常 1:字符串
        },
        success: function (Result) {
          if (Result.length > 0) {
            that.config = Result[0];
          }
        },
        complete: function (XMLHttpRequest) {
          if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
            window.parent.document.location.href =
              absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
          }
        },
        dataType: "json",
      });
    },
  },
});
